<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像区域 -->
      <div class="avatar-box">
        <img src="../../assets/images/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="0px"
        :model="loginForm"
        :rules="loginFormRules"
        class="login-form"
        ref="loginFormRef"
      >
        <!-- 用户名 -->
        <el-form-item label="账户" prop="loginName">
          <el-input
            v-model="loginForm.loginName"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
          <router-link to="/recoverpw" class="text-muted float-right"
            ><small>忘记密码</small></router-link
          >
        </el-form-item>
        <!-- 勾选 -->
        <el-form-item style="font-size: 14px; color: #606266" prop="rem">
          <el-checkbox
            v-model="loginForm.rem"
            label=""
            name="type"
          ></el-checkbox
          >记住我(非本人电脑勿点)
        </el-form-item>
        <el-form-item class="btns">
          <!-- 按钮 -->
          <el-button
            type="primary"
            @click="onSubmit('loginForm')"
            v-loading="submitState"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <div class="btns" style="margin-top: 32px">
            <p class="text-muted">
              还没有账号密码?
              <router-link to="/register"><b>注册</b></router-link>
            </p>
          </div>
        </el-form-item>
      </el-form>
      <div class="footer-box">
        <p class="account-copyright">2018 © Highdmin. - Coderthemes.com</p>
      </div>
    </div>
    <div id="starry-box">
      <vue-particles
        color="#fff"
        :particleOpacity="0.5"
        :particlesNumber="120"
        shapeType="circle"
        :particleSize="2"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="100"
        :moveSpeed="4"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      labelPosition: "top",
      // 登录表单的数据绑定对象
      loginForm: {
        loginName: "",
        password: "",
        rem: false,
      },
      submitState: false, // 默认不加载
      // 表单的验证规则对象
      loginFormRules: {
        loginName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //页面加载调用获取cookie值
  mounted() {
    this.getCookie();
  },
  methods: {
    /**
     * 提交
     * @param formName
     */
    onSubmit() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        this.submitState = true;
        const self = this;
        //判断复选框是否被勾选 勾选则调用配置cookie方法
        if (self.loginForm.rem == true) {
          // console.log("checked == true");
          //传入账号名，密码，和保存天数3个参数
          self.setCookie(
            self.loginForm.loginName,
            self.loginForm.password,
            self.loginForm.rem,
            30
          );
        } else {
          // console.log("清空Cookie");
          //清空Cookie
          self.clearCookie();
        }
        //与后端请求代码，本功能不需要与后台交互所以省略
        let obj = {
          loginName: this.loginForm.loginName,
          password: this.loginForm.password,
        };
        let query = this.$qs.stringify(obj);

        try {
          await this.reqM1Service("/login", query, "post").then(
            ({ data: res }) => {
              console.log(res);
              if (res.code == 2001) {
                this.submitState = false;
                return this.$message.error("登录失败！");
              } else {
                this.$message.success("登录成功");
                // window.sessionStorage.setItem(
                //   "pname",
                //   // res.object.plateExtendsList.map((item) => item.plates.pname)
                // );
                this.$router.push("/nav");
              }
            }
          );
        } catch (error) {
          console.log(error);
          this.$message.error("登陆失败");
        }
      });
    },
    //设置cookie
    setCookie(c_name, c_pwd, c_status, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "loginName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwdStatus" +
        "=" +
        c_status +
        ";path=/;expires=" +
        exdate.toGMTString();
      // console.log(window.document.cookie);
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          // console.log(arr, arr2);
          if (arr2[0] == "loginName") {
            this.loginForm.loginName = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.loginForm.password = arr2[1];
          } else if (arr2[0] == "userPwdStatus") {
            if (arr2[1] == "true") {
              this.loginForm.rem = true;
            } else {
              this.loginForm.rem = false;
            }
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
}

.login-box {
  width: 542px;
  height: 650px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar-box {
    height: auto;
    width: 140px;
    position: absolute;
    left: 50%;
    top: 13%;
    transform: translate(-50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.login-form {
  position: absolute;
  top: 20%;
  width: 100%;
  padding: 0 45px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: center;
}
.text-muted {
  color: #98a6ad !important;
}
b {
  color: #313a46;
}
.footer-box {
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
}

/deep/ .el-form-item__content {
  line-height: 30px;
}
/deep/ .el-form-item {
  margin-bottom: 10px;
}
/deep/ .el-form-item__label {
  padding-bottom: 0 !important;
  color: #313a46;
}
/deep/.el-input__inner {
  border: 1px solid #d9e3e9;
}
/deep/.el-input__inner:focus {
  border-color: #a2b9ca !important;
}
/deep/ .el-input input::-webkit-input-placeholder {
  color: #757575;
}
/deep/ .el-input input::-moz-input-placeholder {
  color: #757575;
}
/deep/ .el-input input::-ms-input-placeholder {
  color: #757575;
}
/deep/ .el-checkbox__input.is-checked /deep/.el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate /deep/.el-checkbox__inner {
  background-color: #02c0ce;
  border-color: #02c0ce;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #02c0ce;
}
/deep/.el-checkbox.is-bordered.is-checked {
  border-color: #02c0ce;
}
/deep/.el-checkbox__input.is-focus /deep/.el-checkbox__inner {
  border-color: #02c0ce;
}
/deep/.el-checkbox__inner {
  background-color: #ffffff;
  border-radius: 3px;
  border: 2px solid #98a6ad;
  content: "";
  // display: inline-block;
  height: 18px;
  left: 0;
  margin-right: 8px;
  // position: absolute;
  transition: 0.3s ease-in-out;
  width: 18px;
  outline: none !important;
}
/deep/ .el-checkbox__inner:hover {
  border-color: #02c0ce;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #02c0ce;
  border-color: #02c0ce;
}
/deep/.el-button {
  padding: 12px 197px;
  margin-top: 20px;
}
/deep/ .el-button--primary:focus,
.el-button--primary:hover {
  background: #02a8b5;
  border-color: #02a8b5;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
  margin-right: 0;
}
/deep/.el-form-item__error {
  top: 0;
  right: 0 !important;
  padding-top: 0px;
  left: auto;
  margin-top: -20px;
}
/deep/.el-form-item.is-error .el-input__inner {
  background-color: #fbe2e2;
}

// 星空背景
#particles-js {
  background: #003c50;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -100;
}
</style>